<template>
  <view :class="theme">
    <view class="m-30">
      <view v-for="(item, index) in providers.list" :key="index"
        class="mb-30 relative flex-row b-rounded-16 overflow-hidden items-center p-30"
        style="background-image: linear-gradient(37deg, #081731, #270827);">
        <!-- <label class="absolute top-0 left-0 justify-center w-100 h-40 color-base bg-primary fw-600"
          style="border-radius: 16rpx 0;">
          Top {{ index + 1 }}
        </label> -->
        <view class="flex-1 overflow-hidden">

          <view class="mt-18 flex-row items-center">
            <view class="flex-1 flex-row items-center">
              <view class="relative w-100 h-100">
                <uv-avatar size="100" :src="include(item.avatar)" />
                <label v-if="item.user_sn" class="absolute bottom-0 text-20 justify-center w-full b-rounded-16 fw-700"
                  style="text-shadow: 1rpx 0 2rpx #eee; font-style: italic; background-color: rgba(92, 51, 201, 0.9); backdrop-filter: blur(30rpx);">
                  {{ item.user_sn }}
                </label>
              </view>
              <view class="ml-24">
                <text class="flex-1 overflow-hidden color-label text-28 fw-600 ellipsis">{{ item.nickname }}</text>
                <view class="flex-1 mt-12 lh-[2] text-26 flex-row flex-wrap">
                  <!-- <label @click="item.mobile && uniCopyText({ data: item.mobile })"
                    :class="['mt-12 mr-30', { 'op-60': !item.mobile }]">
                    <uv-icon :color="$config.COLOR_PRIMARY" size="38" name="phone-fill" />
                    <text class="ml-6 mr-12">
                      <text class="text-22">{{ item.mobile }}</text>
                    </text>
                  </label> -->
                  <label @click="item.wx && uniCopyText({ data: item.wx })"
                    :class="['mt-12 mr-30', { 'op-30': !item.wx }]">
                    <uv-icon color="#1aad19" size="38" name="weixin-circle-fill" />
                    <text class="ml-6 mr-12">
                      <text class="text-22">{{ item.wx }}</text>
                    </text>
                  </label>
                  <label @click="item.qq && uniCopyText({ data: item.qq })"
                    :class="['mt-12 mr-30', { 'op-30': !item.qq }]">
                    <uv-icon :color="$config.COLOR_PRIMARY" size="38" name="qq-circle-fill" />
                    <text class="ml-6 mr-12">
                      <text class="text-22">{{ item.qq }}</text>
                    </text>
                  </label>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="items-center mt-30 mb-30">
        <uv-image v-if="!providers.list.length" :showLoading="false" width="400" height="400" class="mt-60 mb-30"
          src="/static/img/blank.png" mode="aspectFit" />
        <uv-load-more :status="providers.cache.status" :is-dot="!!providers.list.length" />
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useMapState } from "@/common/libs/store";
import { pager, uniCopyText } from "@/common/libs/utils";
import { onLoad, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
import { reactive } from "vue";

const { theme } = useMapState(["theme"]);
const { $config = {} } = getApp().globalData || {};

const providers = reactive({
  page: 0,
  list: [] as any[],
  cache: {
    page: 1,
    list: [] as any[],
    status: "nomore"
  },
  next: false,
});

onLoad(() => getData());

onReachBottom(() => getData());

onPullDownRefresh(() => {
  providers.page = 0;
  providers.next = false;
  providers.cache = {
    page: 1,
    list: [] as any[],
    status: "nomore"
  };
  getData();
  setTimeout(uni.stopPullDownRefresh, 360);
});

const getData = () => {
  pager({ url: "/leaderBoard", data: { type: 1 } }, providers);
}
</script>

<style lang="scss" scoped>
// scss
</style>